<template>
  <div>
    <div v-for="(item, index) in data" :key="index" :style="{ display: allLeaf(item.children) ? 'flex' : 'flex' }" class="line">
      <span class="title" style="font-weight: 500">{{ item.title }}:</span>
      <div v-if="allLeaf(item.children, item.leaf) && levels == 1" class="all-leaf all-leaf-pare">
        <a-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll" @change="e => onCheckAllChange(e, item)" class="check-all">全部</a-checkbox>
        <a-checkbox-group :value="item.checkList" @change="e => onCheckChange(e, item)" class="check-group">
          <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in item.children" :key="nextIndex">{{ nextItem.title }}</a-checkbox>
        </a-checkbox-group>
      </div>
      <template v-else>
        <div class="next-tree next-tree-pare">
          <div>
            <a-tabs type="card" :animated="false" :style="{ minHeight: '90px' }" :size="'small'">
              <a-tab-pane :key="child.code" :tab="child.title" v-for="child in item.children">
                <template v-if="allLeaf(child.children, child.leaf)">
                  <div v-if="child.children && child.children.length > 0" class="all-leaf all-leaf-pare">
                    <a-checkbox :indeterminate="child.indeterminate" :checked="child.checkAll" @change="e => onCheckAllChange(e, child)" class="check-all">全部</a-checkbox>
                    <a-checkbox-group v-model="child.checkList" @change="e => onCheckChange(e, child)" class="all-leaf check-group">
                      <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in child.children" :key="nextIndex">{{ nextItem.title }}</a-checkbox>
                    </a-checkbox-group>
                  </div>
                  <div v-else>暂无标签</div>
                </template>
                <template v-else>
                  <query-tree :treeData="child.children" @update="update"></query-tree>
                </template>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import QueryTree from './QueryTree.vue'
export default {
  name: 'queryTreePare',
  components: { QueryTree },
  props: {
    treeData: {
      type: Array,
      default: null
    },
    layer: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      data: [],
      // indeterminate: true,
      // checkAll: false,
      levels: 0
    }
  },
  computed: {
    allLeaf: () => {
      return (list, leaf) => {
        // console.log(list)
        if (!leaf && list != null) {
          let result = list.filter(item => item.leaf)
          if (result.length == list.length) {
            return true
          } else {
            return false
          }
        } else {
          return true
        }
      }
    }
  },
  watch: {
    treeData: {
      handler(newValue) {
        this.data = JSON.parse(JSON.stringify(newValue))
      },
      deep: true
    }
  },
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.treeData))
    console.log(this.data)
    this.levels = this.layer + 1
    this.onCheckAllChange
  },
  methods: {
    onCheckAllChange(e, item) {
      console.log(e.target.checked, item)
      item.checkValue = e.target.checked ? item.children : []
      item.checkList = e.target.checked ? item.children.map(e => e.code) : []
      item.indeterminate = false
      item.checkAll = e.target.checked
      let obj = {
        codes: e.target.checked ? item.children : [],
        code: item.code
      }
      // console.log(obj)
      this.$emit('update', obj)
    },
    onCheckChange(value, item) {
      console.log(value, item)
      item.checkList = value
      item.checkValue = []
      for (let i of item.children) {
        if (value.includes(i.code)) {
          item.checkValue.push(i)
        }
      }
      item.indeterminate = !!item.checkValue.length && item.checkValue.length < item.children.length
      item.checkAll = item.checkValue.length == item.children.length
      let obj = {
        codes: item.checkValue,
        code: item.code
      }
      // console.log(obj)
      this.$emit('update', obj)
    },
    update(obj, data) {
      this.$emit('update', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 14px;
  color: #333;
  line-height: 30px;
  white-space: nowrap;
  margin-right: 12px;
}
.all-leaf {
  display: flex;
  flex-wrap: wrap;
  line-height: 30px;
  align-items: center;
  .tag {
    margin: 0;
  }
  /deep/ .ant-checkbox-wrapper {
    margin-bottom: 8px;
    .ant-checkbox {
      display: none;
    }
  }
  /deep/.ant-checkbox-wrapper-checked {
    background: #1890ff;
    color: white;
    border-radius: 2px;
  }
}
.all-leaf-pare {
  width: calc(100% - 100px);
  position: relative;
  display: block;
}
.line {
  // margin-bottom: 12px;
  clear: both;
  width: 100%;
  overflow: hidden;
}
.next-tree {
  // margin-left: 24px;
}
.next-tree-pare {
  width: calc(100% - 100px);
}
.ant-tabs /deep/.ant-tabs-small-bar .ant-tabs-nav-container {
  margin-top: 0;
  height: 30px;
}
.ant-tabs /deep/.ant-tabs-bar {
  margin-bottom: 0;
}
.ant-tabs /deep/.ant-tabs-bar .ant-tabs-tab {
  padding: 0 16px;
  height: 30px;
  line-height: 28px;
}
.ant-tabs /deep/.ant-tabs-top-content {
  border: 1px solid #e8e8e8;
  border-top: none;
  padding-top: 8px;
}

.check-all {
  position: absolute;
}
.check-group {
  .ant-checkbox-wrapper {
    line-height: 30px;
    margin-right: 16px;
    margin-left: 0;
  }
  .ant-checkbox-wrapper:first-child {
    margin-left: 60px;
  }
  .ant-checkbox-wrapper:last-child {
    margin-right: 0px;
  }
}
</style>

